{extend name="public/base"}
{block name="bread"}
<li class="breadcrumb-item active" aria-current="page">学员管理</li>
{/block}
{block name="content"}
<div class="row">
	<div class="col">
		<div class="d-flex justify-content-between mb-2">
			<a href="javascript:;" class="btn btn-primary" data-toggle="modal" data-target="#add">添加学员</a>
			<div>
				<form action="">
				  <div class="input-group">
				  <input type="text" class="form-control" placeholder="搜谁">
				  <div class="input-group-append">
				    <button class="btn btn-primary">搜索</button>
				  </div>
				</div>
				</form>
			</div>	
		</div>

		<table class="table table-bordered table-hover">
		  <thead class="thead-dark">
		    <tr>
		      <th scope="col">id</th>
		      <th scope="col">学生姓名</th>
		      <th scope="col">邮箱</th>
		      <th scope="col">状态</th>
		      <th scope="col">是否管理员</th>
		      <th scope="col">创建时间</th>
		      <th scope="col">编辑</th>
		    </tr>
		  </thead>
		  <tbody>
		  	{volist name="lis" id="vo"}
		    <tr>
		      <th scope="row">{$vo.id}</th>
		      <td>{$vo.username}</td>
		      <td>{$vo.email}</td>
		      <td>
		      	{switch $vo.status}
		      	{case 1}<span class="text-success">正常</span>{/case}
		      	{case 0}<span class="text-danger">禁用</span>{/case}
		      	{/switch}
		      </td>
		      <td>
		      	{switch $vo.is_admin}
		      	{case 1}<span class="text-success">是</span>{/case}
		      	{case 0}<span class="text-danger">否</span>{/case}
		      	{/switch}
		      </td>
		      <td>{$vo.create_time}</td>
		      <td>
		      	<div class="btn-group btn-group-sm" role="group" aria-label="Basic example">
				 	<a href="" class="btn btn-outline-info"><i class="fa fa-edit"></i></a>
				 	<a href="" class="btn btn-outline-danger"><i class="fa fa-trash"></i></a>
				</div>
		      </td>
		    </tr>
		    {/volist}
		  </tbody>
		</table>
		<div class="d-flex justify-content-center">
		{$lis->render()}
		</div>
	</div>
</div>	
<!-- Modal -->
<div class="modal fade" id="add" tabindex="-1" aria-labelledby="e" aria-hidden="true" data-backdrop="static">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="e">添加学员 <small class="text-danger danger"></small> </h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
		<form id="add_form">
		  <div class="form-group">
		    <label>Username</label>
		    <input type="text" name="username" id="username" class="form-control" placeholder="输入学生姓名">
		  </div>
		  <div class="form-group">
		    <label>Email</label>
		    <input type="email" name="email" id="email" class="form-control" placeholder="输入学生邮箱">
		  </div>
		  <div class="form-group">
		    <label>Password</label>
		    <input type="password" name="password" id="password" class="form-control" placeholder="输入学生密码">
		  </div>
		  <div class="form-group">
		    <label>RePassword</label>
		    <input type="password" name="repassword" id="repassword" class="form-control" placeholder="确认学生密码">
		  </div>
		  <button type="button" class="btn btn-primary" id="add_btn">确认添加</button>
		</form>		
      </div>
    </div>
  </div>
</div>
<script>
	$(function(){
		$("#add_form input").blur(function(){
			var val = $.trim($(this).val())
			if($(this).is("#username")){
				if(val=='' || val.length<3 || val.length>20){
					$(".danger").text('学名不为空,不少于3位,不超过20位');
					$(this).addClass('border-danger');
				}else{
					$(".danger").text('');
					$(this).removeClass('border-danger').addClass('border-success');
				}
			}
			if($(this).is("#email")){
				//邮箱正则表达式
				var reg = /^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,})$/;
				if(val=='' || !reg.test(val)){
					$(".danger").text('邮箱格式不正确,格式错误');
					$(this).addClass('border-danger');
				}else{
					$(".danger").text('');
					$(this).removeClass('border-danger').addClass('border-success');
				}
			}
			if($(this).is("#password")){
				if(val=='' || val.length<6 || val.length>20){
					$(".danger").text('密码不为空,不少于6位,不多于20位');
					$(this).addClass('border-danger');
				}else{
					$(".danger").text('');
					$(this).removeClass('border-danger').addClass('border-success');
				}
			}
			if($(this).is("#repassword")){
				var pass = $('#password').val();
				if(val=='' || val !== pass){
					$(".danger").text('确认密码与密码不一致');
					$(this).addClass('border-danger');
				}else{
					$(".danger").text('');
					$(this).removeClass('border-danger').addClass('border-success');
				}
			}
		})
		$("#add_btn").click(function(){
			$("#add_form input").trigger("blur");
			var num = $("#add_form .border-danger").length;
			if (num>0) {
				$(".danger").text('填写有错误,请检查');
				return false;
			}else{
				$.ajax({
					type:"post",
					url:"{:url('admin/user/add')}",
					data:$("#add_form").serialize(),
					dataType:"json",
					success:function(data){
						if(data.code == 200){
							layer.alert(data.msg,{
								icon:1,
								time:2000,
								end:function(){
									window.location.href = "{:url('admin/user/lis')}"
								}
							});
						}else{
							layer.alert(data.msg,{
								icon:0
							})
						}
					}
				})
			}
		}) 
	})
</script>
{/block}